<!-- MenuChildren.vue -->
<template>
  <template v-for="child in children" :key="child.index">
    <el-menu-item 
      v-if="!child.children" 
      :index="child.index"
      :disabled="child.disabled"
       @click="handleChildClick(child)"
    >
      {{ child.name }}
    </el-menu-item>

    <el-sub-menu 
      v-else 
      :index="child.index"
      :popper-offset="child.popperOffset"
    >
      <template #title>
        {{ child.name }}
      </template>
      
      <menu-children
         @menu-click="handleChildMenuClick" 
        :children="child.children" />
    </el-sub-menu>
  </template>
</template>

<script setup>
import { defineEmits } from 'vue'

defineProps({
  children: {
    type: Array,
    required: true
  }
})

// 定义发射事件
const emit = defineEmits(['menu-click'])

// 处理子项点击
const handleChildClick = (child) => {
  if (child.path && !child.disabled) {
    emit('menu-click', {
      path: child.path,
      index: child.index,
      name: child.name,
      type: child.type || 'item'
    })
  }
}

// 处理更深层子菜单的点击事件
const handleChildMenuClick = (menuData) => {
  emit('menu-click', menuData)
}
</script>